<template>
  <!-- 订单详情弹窗 -->
  <el-dialog
    v-model="visible"
    title="订单信息"
    width="53%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
    class="order-dialog"
  >
    <el-scrollbar style="height: 100%">
      <div v-if="orderData" class="order-detail">
        <!-- 订单顶部信息 -->
        <div class="order-top">
          <div class="order-header">
            <div class="order-number-section">
              <div style="display: inline-block">
                <label style="font-size: 16px">订单号：</label>
                <div class="order-num">{{ orderData.orderNo }}</div>
              </div>
            </div>
            <div class="order-status" :class="{ status3: [3, 4].includes(orderData.reservationStatus) }">
              {{ getStatusText(orderData.reservationStatus) }}
            </div>
          </div>
        </div>

        <!-- 下单时间 -->
        <div class="order-time-section">
          <p><label>下单时间：</label>{{ formatDateTime(orderData.createdTime) }}</p>
        </div>

        <!-- 订单备注独立布局 -->
        <div class="order-remark-section">
          <div class="order-remark">
            <div class="remark-label">订单备注</div>
            <div class="remark-content">{{ orderData.remark }}</div>
          </div>
        </div>

        <!-- 订单中间信息 -->
        <div class="order-middle">
          <!-- 用户信息 -->
          <div class="user-info">
            <div class="user-info-box">
              <div class="user-name">
                <label>用户名：</label>
                <span>{{ orderData.username }}</span>
              </div>
              <div class="user-phone">
                <label>手机号：</label>
                <span>{{ orderData.phone }}</span>
              </div>
              <div class="user-getTime">
                <label>预约时间：</label>
                <span>{{ formatDateTime(orderData.reservationTime) }}</span>
              </div>
              <div class="user-address">
                <label>地址：</label>
                <span>{{ orderData.region }}{{ orderData.detail }}</span>
              </div>
            </div>
            <!-- 预约备注 -->
            <div class="user-remark">
              <div>预约备注</div>
              <span>{{ orderData.reservationRemark }}</span>
            </div>
          </div>

          <!-- 项目信息 -->
          <div class="project-info">
            <div class="project-label">项目</div>
            <div class="project-list">
              <div class="project-item">
                <div class="project-item-box">
                  <span class="project-name">名称：{{ orderData.itemName }}</span>
                </div>
                <div class="project-price">
                  <span class="price-name">价格：</span>
                  <span class="price-value">¥{{ formatPrice(orderData.productPrice) }}</span>
                </div>
              </div>
            </div>
            <div class="project-description">
              <div class="description-label">描述：{{ orderData.itemDescription }}</div>
            </div>
          </div>
        </div>

        <!-- 订单底部信息 -->
        <div class="order-bottom">
          <div class="amount-info">
            <div class="amount-label">费用</div>
            <div class="amount-list">
              <div class="project-amount">
                <span class="amount-name">{{ orderData.itemName }}x{{ orderData.productQuantity }}：</span>
                <span class="amount-price">¥{{ formatPrice(orderData.productPrice * orderData.productQuantity) }}</span>
              </div>
              <div class="all-amount">
                <span class="amount-name">总计：</span>
                <span class="amount-price">¥{{ formatPrice(orderData.totalAmount) }}</span>
              </div>
              <div class="pay-type">
                <span class="pay-name">支付方式：</span>
                <span class="pay-value">微信支付</span>
              </div>
              <div class="pay-time">
                <span class="pay-name">支付时间：</span>
                <span class="pay-value">{{ formatDateTime(orderData.payTime) }}</span>
              </div>
              <div v-if="orderData.reservationStatus === 3" class="refund-time">
                <span class="pay-name">退款时间：</span>
                <span class="pay-value">{{ formatDateTime(orderData.refundTime) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<script setup lang="ts">
import type { OrderResponse } from '@/api/model/orderModel';
import { formatDateTime } from '@/utils/date';
import { computed } from 'vue';

// 定义组件名称
defineOptions({
  name: 'OrderDetail',
});

// 定义 props
interface Props {
  modelValue: boolean; // 控制弹窗显示/隐藏
  orderData: OrderResponse | null; // 订单数据
}

// 定义 emits
interface Emits {
  (e: 'update:modelValue', value: boolean): void;
  (e: 'close'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 计算属性：控制弹窗显示
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value),
});

// 状态相关方法
const getStatusText = (status: number) => {
  const statusMap = {
    '-1': '待付款',
    '0': '待确定',
    '1': '已确认',
    '2': '已完成',
    '3': '已取消',
  };
  return statusMap[status.toString()] || '未知状态';
};

// Element Plus 标签类型映射
const getStatusType = (status: number) => {
  const typeMap = {
    '-1': 'info', // 待付款 - 灰色
    '0': 'warning', // 待确定 - 橙色
    '1': 'success', // 已确认 - 绿色
    '2': 'success', // 已完成 - 绿色
    '3': 'danger', // 已取消 - 红色
  };
  return typeMap[status.toString()] || 'default';
};

// 分 → 元，去掉尾部无意义的 0
const formatPrice = (cents?: number | string | null): string => {
  if (cents == null || cents === '' || Number.isNaN(cents)) return '0';
  const y = Number(cents) / 100; // 转元
  if (!Number.isFinite(y)) return '0'; // 防 Infinity/NaN
  return y
    .toFixed(2) // 先保留 2 位
    .replace(/\.?0+$/, '') // 去掉小数点后全 0
    .replace(/\.$/, ''); // 如果小数点成孤儿，也删掉
};

// 处理弹窗关闭事件
const handleClose = () => {
  emit('close');
};
</script>

<style scoped lang="scss">
// 订单详情弹窗样式
.order-detail {
  .order-top {
    // height: 80px;
    padding-left: 22px;
    padding-right: 22px;
    // margin: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .order-header {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .order-number-section {
        margin-bottom: 10px;
      }

      .order-status {
        width: 57.25px;
        height: 27px;
        background: #333333;
        border-radius: 13.5px;
        color: white;
        text-align: center;
        line-height: 27px;
        font-size: 12px;
        flex-shrink: 0;
      }

      .status3 {
        background: #f56c6c;
      }

      .order-num {
        font-size: 16px;
        color: #2a2929;
        font-weight: bold;
        display: inline-block;
      }
    }

    p {
      color: #333;
      margin: 0;
      label {
        color: #666;
      }
    }
  }

  // 下单时间样式
  .order-time-section {
    padding: 0 22px;
    margin-top: 10px;
    text-align: right;

    p {
      color: #333;
      margin: 0;
      label {
        color: #666;
      }
    }
  }

  // 订单备注独立布局样式
  .order-remark-section {
    margin-top: 20px;
    padding: 0 22px;

    .order-remark {
      min-height: 43px;
      line-height: 43px;
      background: #fffbf0;
      border: 1px solid #fbe396;
      border-radius: 4px;
      padding: 6px;
      display: flex;
      align-items: center;

      .remark-label {
        display: inline-block;
        min-width: 53px;
        height: 32px;
        background: #fbe396;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        color: #333;
        margin-right: 30px;
        font-size: 12px;
      }

      .remark-content {
        color: #f2a402;
        line-height: 1.15;
        word-wrap: break-word; // 允许长单词换行
        word-break: break-all; // 允许在任意字符间换行
        white-space: pre-wrap; // 保留空白字符并允许换行
        flex: 1; // 占据剩余空间
        min-width: 0; // 允许flex子项收缩
      }
    }
  }

  .order-middle {
    .user-info {
      min-height: 140px;
      background: #fbfbfa;
      margin-top: 23px;
      padding: 20px 43px;
      color: #333;

      .user-info-box {
        min-height: 55px;
        display: flex;
        flex-wrap: wrap;

        .user-name {
          flex: 67%;
        }

        .user-phone {
          flex: 33%;
        }

        .user-getTime {
          margin-top: 14px;
          flex: 80%;
          label {
            margin-right: 3px;
          }
        }

        label {
          margin-right: 17px;
          color: #666;
        }

        .user-address {
          margin-top: 14px;
          flex: 80%;
          label {
            margin-right: 30px;
          }
        }
      }

      .user-remark {
        min-height: 43px;
        line-height: 43px;
        background: #fffbf0;
        border: 1px solid #fbe396;
        border-radius: 4px;
        margin-top: 10px;
        padding: 6px;
        display: flex;
        align-items: center;

        div {
          display: inline-block;
          min-width: 53px;
          height: 32px;
          background: #fbe396;
          border-radius: 4px;
          text-align: center;
          line-height: 32px;
          color: #333;
          margin-right: 30px;
          font-size: 12px;
        }

        span {
          color: #f2a402;
          line-height: 1.15;
          word-wrap: break-word; // 允许长单词换行
          word-break: break-all; // 允许在任意字符间换行
          white-space: pre-wrap; // 保留空白字符并允许换行
          flex: 1; // 占据剩余空间
          min-width: 0; // 允许flex子项收缩
        }
      }
    }

    .project-info {
      // min-height: 180px;
      display: flex;
      flex-wrap: wrap;
      padding: 20px 40px;
      border-bottom: 1px solid #e7e6e6;

      .project-label {
        color: #666;
        margin-right: 65px;
      }

      .project-list {
        flex: 80%;
        display: flex;
        flex-direction: column; // 改为垂直布局

        .project-item {
          display: flex;
          justify-content: space-between; // 项目名称和价格分布在两端
          align-items: center;
          margin-bottom: 14px;
          color: #333;

          .project-item-box {
            flex: 1; // 项目名称占据剩余空间
          }

          .project-price {
            display: flex;
            align-items: center;
            text-align: right; // 价格右对齐
            margin-right: 153px;

            .price-name {
              margin-right: 6px;
              color: #333;
            }

            .price-value {
              color: #f56c3c;
              font-weight: 600;
            }
          }
        }
      }

      .project-description {
        flex: 1;
        padding-left: 92px;
        margin-top: 10px;

        .description-label {
          color: #333333;
          font-weight: bold;
          margin-right: 5px;
          margin-bottom: 8px;
        }

        .description-content {
          color: #666;
          line-height: 1.5;
        }
      }
    }
  }

  .order-bottom {
    .amount-info {
      // min-height: 180px;
      display: flex;
      flex-wrap: wrap;
      padding: 20px 40px;
      padding-bottom: 0px;

      .amount-label {
        color: #666;
        margin-right: 65px;
      }

      .amount-list {
        flex: 80%;
        display: flex;
        flex-wrap: wrap;
        color: #333;

        .project-amount,
        .pay-type {
          display: inline-block;
          width: 300px;
          margin-bottom: 14px;
          flex: 50%;
        }

        .project-amount {
          .amount-name {
            margin-right: 6px;
          }
        }

        .all-amount,
        .pay-time {
          display: inline-block;
          flex: 50%;
          padding-left: 10%;
        }

        .all-amount {
          .amount-name {
            margin-right: 6px;
          }
          .amount-price {
            color: #f56c6c;
            font-weight: 600;
          }
        }

        .pay-type,
        .pay-time,
        .refund-time {
          .pay-name {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.order-dialog {
  .el-dialog {
    max-height: 764px !important;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
  }
  .el-dialog__body {
    height: 520px !important;
  }
}

.el-dialog__body {
  padding-top: 34px;
  padding-left: 30px;
  padding-right: 30px;
}
</style>
